<template>
    <h2>用户还款</h2>
    <table class="table table-bordered">
        <tr>
            <td>借款款项名称</td>
            <td>{{ state.B_Name }}</td>
        </tr>
        <tr>
            <td>借款最高金额</td>
            <td>{{ state.B_Money }}CNY</td>
        </tr>
        <tr>
            <td>利息</td>
            <td>{{ state.I_Interest/100 }}%</td>
        </tr>
        <tr>
            <td>借款金额</td>
            <td>{{ state.UB_Money }}CNY</td>
        </tr>
        <tr>
            <td>利息</td>
            <td>{{ state.UB_Money*state.I_Interest }}CNY</td>
        </tr>
        <tr>
            <td>应还款(本+利)</td>
            <td>{{ state.UB_Money + Number(state.UB_Money*state.I_Interest)}}CNY</td>
        </tr>
        <tr>
            <td>还款金额</td>
            <td><input type="text" v-model="UBR_Money"  /></td>
        </tr>
       
        <tr>
            <td></td>
            <td><input type="button" @click="ok" value="确认还款" class="btn btn-primary" /></td>
        </tr>
    </table>
   </template>
   
   <script setup lang="ts">
 import{reactive,ref,toRefs,onMounted} from 'vue'
   import { useRouter,useRoute } from 'vue-router'
   import axios from 'axios'
   import {useUserStore} from '../../store/User'
//创建store对象
const userStore=useUserStore();
   let router=useRouter()
   let route=useRoute()
   let data:any=reactive({
       
       state:{
       
       },
       UBR_Money:''
   })
   let {state,UBR_Money}=toRefs(data)
   onMounted(()=>{
       show();
      
   })
   //
   const show=()=>{
       axios({
           url:"/api/Borrow/GetUserRedeemInfo",
           method:'get',
           params:{
            uBid:route.query.id
           }
       })
       .then(res=>{
           console.log(res.data.data);
          state.value=res.data.data[0];
       })
       .catch(err=>{
           console.log(err);   
       })
   }
   const ok=()=>{
    if(isNaN(UBR_Money.value)==true)
    {
        alert('只能输入数字');
        return;
    }
    if(UBR_Money.value>state.value.UB_Money)
    {
        alert('还款金额不能大于应还款金额');
        return;
    }
    axios({
           url:"/api/Borrow/PostUserBorrowRedeem",
           method:'post',
           data:{
            UBR_Money:UBR_Money.value,
            UB_Id:route.query.id,
            
           }
       })
       .then(res=>{
           console.log(res);
          if(res.data.data>0)
          {
            alert('还款成功');
            router.push('/main/userborrowRedeemList');
          }
          else{
            alert('还款失败');
            return;
          }
       })
       .catch(err=>{
           console.log(err);   
       })
   }
   </script>
   
   
   
   <style scoped>
   
   </style>
   